<template>
  <div class="nanhuling-page">
    <!-- 顶部标题部分 -->
    <div class="header animate__animated animate__fadeInDown">
      <h1>南湖菱的文化魅力</h1>
      <p>感受传统美食“南湖菱”的独特风味</p>
    </div>

    <!-- 内容区域 -->
    <div class="content">
      <!-- 文本区域 -->
      <div class="text-section animate__animated animate__fadeInLeft">
        <h2>南湖菱的起源</h2>
        <p>
          南湖菱产自中国浙江省嘉兴市的南湖，是端午节期间常见的传统美食之一。菱角在南湖水域生长，水质清澈，菱果饱满，口感鲜美。每年端午节，菱角成为当地餐桌上不可缺少的美味。
        </p>
      </div>

      <!-- 图片区域 -->
      <div class="image-section animate__animated animate__fadeInRight">
        <img src="nanhuling.jpeg" alt="南湖菱图片" />
      </div>
    </div>

    <!-- 种类展示 -->
    <div class="list-section animate__animated animate__zoomIn">
      <h2>南湖菱的种类</h2>
      <div class="cards">
        <!-- 糯米菱 -->
        <div class="card" @click="toggleCard('glutinous')" :class="{ flipped: flippedCards.glutinous }">
          <div class="card-front">
            <h3>糯米菱</h3>
            <p>使用新鲜菱角和糯米制成，香甜软糯，口感丰富。</p>
          </div>
          <div class="card-back">
            <img src="nanhuling.jpeg" alt="糯米菱" />
          </div>
        </div>

        <!-- 糖醋菱 -->
        <div class="card" @click="toggleCard('sourSweet')" :class="{ flipped: flippedCards.sourSweet }">
          <div class="card-front">
            <h3>糖醋菱</h3>
            <p>菱角加入糖醋调料，酸甜开胃，别具一格。</p>
          </div>
          <div class="card-back">
            <img src="nanhuling.jpeg" alt="糖醋菱" />
          </div>
        </div>

        <!-- 酱香菱 -->
        <div class="card" @click="toggleCard('savory')" :class="{ flipped: flippedCards.savory }">
          <div class="card-front">
            <h3>酱香菱</h3>
            <p>香气四溢的酱香菱，醇厚的味道令人陶醉。</p>
          </div>
          <div class="card-back">
            <img src="nanhuling.jpeg" alt="酱香菱" />
          </div>
        </div>
      </div>
    </div>

    <!-- 底部提示 -->
    <div class="footer animate__animated animate__fadeInUp">
      <p>版权所有 © 姓名: 陶诗莹, 学号: 2300303105, 电话: 15024340028, 邮箱: 2351922591@qq.com</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "ZongziView",
  data() {
    return {
      flippedCards: {
        sweet: false,
        salty: false,
        special: false,
      },
    };
  },
  mounted() {
    // 强制将页面滚动到顶部
    this.$nextTick(() => {
      window.scrollTo(0, 0);
    });
  },
  methods: {
    toggleCard(type) {
      this.$set(this.flippedCards, type, !this.flippedCards[type]);
    },
  },
};
</script>


<style scoped>
/* 引入动画库 */
@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css');

/* 页面背景 */
.nanhuling-page {
  font-family: Arial, sans-serif;
  color: #4f2f2f;
  text-align: center;
  padding: 20px;
  background: linear-gradient(135deg, #f5e6cc, #d7b894);
  min-height: 100vh;
  overflow-x: hidden;
}

/* 顶部标题样式 */
.header {
  background: rgba(245, 230, 204, 0.9);
  padding: 20px;
  margin-bottom: 30px;
  border-radius: 15px;
  border: 2px solid #b8895b;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.header h1 {
  font-size: 3em;
  color: #a05a2c;
  margin: 0;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

.header p {
  font-size: 1.2em;
  color: #7a5530;
  margin-top: 10px;
}

/* 内容区域 */
.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 30px;
}

.text-section {
  flex: 1;
  min-width: 300px;
  margin-right: 20px;
  text-align: left;
}

.text-section h2 {
  font-size: 2em;
  color: #a05a2c;
  margin-bottom: 10px;
}

.text-section p {
  line-height: 1.8;
  font-size: 1.1em;
  text-align: justify;
  color: #4f2f2f;
}

.image-section {
  flex: 1;
  min-width: 300px;
}

.image-section img {
  max-width: 100%;
  border-radius: 15px;
  border: 3px solid #b8895b;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 种类展示卡片 */
.list-section {
  text-align: center;
  margin-top: 30px;
}

.list-section h2 {
  font-size: 2.5em;
  margin-bottom: 20px;
  color: #a05a2c;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.card {
  background: linear-gradient(135deg, #d7b894, #c49c72);
  padding: 20px;
  width: 250px;
  height: 350px;
  border-radius: 15px;
  color: white;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  perspective: 1000px;
}

.card h3 {
  font-size: 1.8em;
  margin-bottom: 10px;
  color: #4f2f2f;
}

.card p {
  font-size: 1.1em;
  line-height: 1.6;
  color: #ffffff;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.card .card-front,
.card .card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  backface-visibility: hidden;
  transition: transform 0.8s;
}

.card .card-front {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #d7b894, #c49c72);
}

.card .card-back {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  transform: rotateY(180deg);
}

.card.flipped .card-front {
  transform: rotateY(180deg);
}

.card.flipped .card-back {
  transform: rotateY(0deg);
}

.card-back img {
  object-fit: cover; /* 保证图片不留白，填充整个卡片 */
  width: 100%;
  height: 100%;
  border-radius: 15px;
}

/* 底部提示 */
.footer {
  margin-top: 40px;
  font-size: 1.2em;
  color: #4f2f2f;
  padding: 20px;
  background: linear-gradient(135deg, #c49c72, #d7b894);
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

</style>
